<template>
  <div class="container">
    <title-com><div class="btn" @click="goRouter">招聘广场</div></title-com>
    <div class="content">
      <h3 class="title">岗位发布</h3>
      <div class="line">
        <label for="">职位要求</label>
        <input
          type="text"
          placeholder="请输入职位名称"
          v-model="data.jobIptData.jobName"
        />
      </div>
      <div class="line">
        <label for="">学历要求</label>
        <select name="" id="" v-model="data.jobIptData.education">
          <option
            :value="i"
            v-for="(i, index) in data.selectOptions.Education"
            :key="index"
          >
            {{ i }}
          </option>
        </select>
      </div>
      <div class="line">
        <label for="">经验要求</label>
        <select name="" id="" v-model="data.jobIptData.workingYears">
          <option
            :value="i"
            v-for="(i, index) in data.selectOptions.WorkingYears"
            :key="index"
          >
            {{ i }}
          </option>
        </select>
      </div>
      <div class="line">
        <label for="">工资范围最低值</label>
        <select name="" id="" v-model="data.jobIptData.payMin">
          <option
            :value="i"
            v-for="(i, index) in data.selectOptions.PayMin"
            :key="index"
          >
            {{ i }}
          </option>
        </select>
      </div>
      <div class="line">
        <label for="">工资范围最高值</label>
        <select name="" id="" v-model="data.jobIptData.payMax">
          <option
            :value="i"
            v-for="(i, index) in data.selectOptions.PayMax"
            :key="index"
          >
            {{ i }}
          </option>
        </select>
      </div>
      <div class="line">
        <label for="">薪次</label>
        <select name="" id="" v-model="data.jobIptData.payMonth">
          <option
            :value="i"
            v-for="(i, index) in data.selectOptions.PayMonths"
            :key="index"
          >
            {{ i }}
          </option>
        </select>
      </div>
      <div class="line">
        <label for="">福利待遇</label>
        <label
          for=""
          v-for="(i, index) in data.selectOptions.Welfares"
          :key="index"
          :value="i"
        >
          <input
            type="checkbox"
            class="welfare"
            v-model="data.jobIptData.welfare"
          />{{ i }}
        </label>
      </div>
      <div class="line">
        <label for="">工作地点</label>
        <select name="" id="" class="city" v-model="data.jobIptData.cityId">
          <option
            :value="i.name"
            v-for="(i, index) in data.selectOptions.City"
            :key="index"
          >
            {{ i.name }}
          </option>
        </select>
        <select name="" id="" class="area" v-model="data.jobIptData.areaId">
          <option
            :value="i.name"
            v-for="(i, index) in data.selectOptions.Area"
            :key="index"
          >
            {{ i.name }}
          </option>
        </select>
      </div>
      <div class="line">
        <label for="">招聘企业</label>
        <select name="" id="" v-model="data.jobIptData.companyId">
          <option
            :value="i.name"
            v-for="(i, index) in data.selectOptions.Company"
            :key="index"
          >
            {{ i.name }}
          </option>
        </select>
      </div>
      <div class="publish" @click="subFun">发布招聘</div>
    </div>
  </div>
</template>
<script lang="ts">
import { getRequiement, postJob } from "@/http/job";
import { InitData } from "@/types/release";
import { defineComponent, onMounted, reactive } from "vue";
import { useRouter } from "vue-router";
import TitleCom from "../components/TitleCom.vue";
export default defineComponent({
  components: { TitleCom },
  setup() {
    const data = reactive(new InitData());
    const router = useRouter();
    const goRouter = () => {
      router.push("/");
    };
    const subFun = () => {
      console.log(data.jobIptData.jobName);
      let k: keyof typeof data.jobIptData;
      for (k in data.jobIptData) {
        if (!data.jobIptData[k]) {
          console.log(k);
          alert("请完善信息");
          return;
        }
      }
      postJob({
        ...data.jobIptData,
        welfare: data.jobIptData.welfare.join(","),
      }).then((res: any) => {
        console.log(res);
        alert("发布成功");
      });
    };
    onMounted(() => {
      getRequiement().then((res: any) => {
        data.selectOptions = { ...data.selectOptions, ...res.data };
        console.log(data.selectOptions);
      });
    });
    return { goRouter, data, subFun };
  },
});
</script>
<style scoped lang="less">
.container {
  width: 1000px;
  margin: 0 auto;
  box-shadow: 10px 10px 15px #999;
  .btn {
    cursor: pointer;
    color: cadetblue;
    border: 2px solid cadetblue;
    border-radius: 10px;
    padding: 10px 18px;
  }
  .content {
    padding: 10px 20px;
    .title {
      color: cadetblue;
      border-bottom: 2px solid cadetblue;
    }
    .line {
      label {
        display: inline-block;
        width: 120px;
        margin-top: 10px;
      }
      input[type="text"] {
        width: 154px;
        height: 20px;
      }

      select {
        width: 160px;
        height: 25px;
      }
      .city,
      .area {
        width: 75px;
        margin-right: 10px;
      }
    }
    .publish {
      width: 120px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      color: #fff;
      cursor: pointer;
      border-radius: 5px;
      background-color: cadetblue;
      margin-top: 10px;
    }
  }
}
</style>
